Together with  Blacksmith
🚀 Frontend Focus

#​685 — March 26, 2025 | Read on the web

The <select> Element Can Now Be Customized with CSS — There’s now an accessible, standardized way to create styleable <select> elements — thanks to appearance: base-select. Adam shares how this has been “many years in the making” and after “many hours of engineering and collaborative specification work” we now have a rich component that won’t break in older browsers. Here’s a closer look at how things play in Chrome (the first to implement support), and how to use it.

Adam Argyle

How to Think About Baseline and Polyfills — Despite polyfills not being included as part of the Baseline project, Baseline can still help bring some nuance to the decision making around whether or not to use them.

Jeremy Wagner

2X-40X Faster Docker Builds with Blacksmith — With a one-line code change, Blacksmith can make your Docker builds incremental by mounting your Docker layer cache into your GitHub Actions runner. Blacksmith is used by 300+ companies like Ashby, Clerk, and Mintlify.

Blacksmith sponsor

Support Logical Shorthands in CSS — The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years (since 2017!). Miriam asks if we get them unstuck?

Miriam Suzanne

Minding the Gaps: A New Way to Draw Separators in CSS — Explains CSS gap decorations, a new proposal being worked on (and seeking feedback) for adding and extending fine-tune control over gap decorations.

Babbitt & Brosset (Microsoft)

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Revisiting CSS border-image — A deep dive into the powerful border-image property and how it can be used in various creative ways: “By slicing, repeating, and outsetting images, you can create intricate borders, decorative elements, and even dynamic overlays with minimal code”.

Andy Clarke

Meet @clerk/agent-toolkit — New experimental Clerk package for AI agent workflows. Manage users and orgs with Vercel AI SDK & LangChain support.

Clerk sponsor

The Bare Minimum You Need to Enable View Transitions on Your Site — View transitions are a solid way to make your site feel more dynamic and engaging when folks are navigating between pages. Here’s the basics for getting started.

Amit Merchant

Layered Text Headers — Applying a stroke effect to text across all browsers is possible, but as Chris points out it makes use of a center-aligned look which “looks like 💩” (his words). However, the paint-order property may be worth a look as part of a solution for achieving a similar look.

Chris Coyier

Previewing Content Changes in Your Work with document.designMode — A look at several use cases for document.designMode and how it can be used to preview content changes, do basic content editing, and improve team collaboration.

Victor Ayomipo

Best Practices for Cognitive Accessibility in Web Design — Lots of good practical advice here, covering ways to improve your website’s cognitive accessibility.

Caitlin de Rooij

25 Ridiculously Impressive HTML5 Canvas Experiments
Abhin Sharma

Why Do We Have a Cache-Control Request Header?
Harry Roberts

Downtime vs 'Slowtime': Which Costs You More?
Tammy Everts

🧰 Tools, Code & Resources

An MCP Server for Playwright and Browser Automation — MCP (Model Context Protocol) servers enable certain LLM-based agents (such as Claude, Claude Code, and Cursor) to perform actions on a system outside of their usual sandbox. This new project from Microsoft enables such LLMs to interact with Web pages in a structured way (much as Playwright lets you do from Python or JavaScript code).

Microsoft

CASCII: A Web-Based ASCII and Unicode Diagram Builder — Imagine something like MS Paint but for text-based drawing. You can switch between ASCII and Unicode modes and enable a background grid for alignment. Export directly to clipboard or in Base64.

Caspar Wylie

Introducing Figma to Bolt — Turn Figma designs into pixel-perfect full stack apps in one click.

bolt.new sponsor

Konva: A JavaScript 2D Canvas Library — The native API for Canvas elements is pretty good, but Konva is a popular abstraction that sits on top and provides a more structured way to work with shapes, styling, events, animations, and more (lots of demos with code). It also has extra integration libraries for Vue, Svelte and React.

Konva

Reveal.js 5.2: The HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v5.2 adds the ability to trigger ‘lightboxes’ where viewers can see images and videos in a way where they stand out more.

Hakim El Hattab

📰 Classifieds

🎹 STRICH: Add blazing fast and reliable 1D/2D Barcode Scanning to your web apps. Free demo app and 30-day trial available.

Parvus 3.0: Accessible Lightbox with No Dependencies — I love how it says not to use overlays on web pages but if you have to, use this! There’s a CodePen example.

Benjamin de Oostfrees

Fancy Components: A Growing Library of Ready-to-Use Animated React Components — Includes a whole slew of components for doing various text animations, along with others for backgrounds, physics-related animations, SVG filters, and more. Try them out here.

Daniel Petho

StringTune: The JavaScript Library Born from a Design Agency’s Workflow — A look at how to make use of this flexible JavaScript library for animations, smooth scrolling, and interactive effects. npm package.

Fiddle.Digital

Cursorful: A Screen Recording Browser Extension with Cursor-Following Zoom
Cursorful

MetaCheck: Preview Your Site’s OG Images, Meta Tags, Favicon, and More
Appstate

Ipx.